<template>
  <view class="add-address-page">
    <view class="each-line">
      <text class="label">收货人：</text>
      <input class="no-input" v-model="addressInfo.realName" type="text" placeholder="收货人" />
    </view>
    <view class="each-line">
      <text class="label">联系电话：</text>
      <input class="no-input" v-model="addressInfo.contactPhone" type="text" placeholder="联系电话" />
    </view>
    <view class="each-line">
      <text class="label">所在地区：</text>
     <view class="" style="display: flex;
		align-items: center;
		justify-content: space-between;flex: 1;">
     	<view class="pca-show" @click="showPicker">{{addressInfo.pcaString}}
     	</view>
     	<view class="YG-adder-img">
     		<image src="/static/img/index/ic_next_black.png" mode=""></image>
     	</view>
     </view>
    </view>
    <u-field style="width: 100%;" v-model="addressInfo.detailAddressTemp" label="详细地址:" label-width="130" placeholder="详细地址：如街道、门牌号、小区、楼栋号、单元室等" type="textarea"></u-field>
    <view class="left-default-btn">
      <checkbox-group @change="defaultChange">
        <label class="default-box">
          <checkbox class="round red" value="defaultAddr" :checked="addressInfo.isDefault === '1'" style="transform:scale(0.7)" /><text class="default-addr">默认地址</text>
        </label>
      </checkbox-group>
    </view>
    <!-- <u-cell-group>
      <u-cell-item title="默认地址" :arrow="false">
        <u-switch slot="right-icon" v-model="addressInfo.isDefault"></u-switch>
      </u-cell-item>
    </u-cell-group> -->
    <button class="submit-btn" type="default" @click="submitEvent">提交</button>
    <u-select v-model="pickerShow" mode="mutil-column-auto" :list="arealist" @confirm="confirmArea"></u-select>
  </view>
</template>

<script>
const api = require('../../config/api')
const util = require('../../utils/util')
export default {
  data() {
    return {
      // localData: cityData,
      localPcData: [],
      pickerShow: false,
      arealist: [],
      addressInfo: {
        id: '',
        realName: '',
        contactPhone: '',
		pcaString: '',
        province: '请选择省市区',
        city: '',
        area: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
		detailAddressTemp: '',
        detailAddress: '',
        remarks: '',
        isDefault: '0',
        tenantId: '3'
      }
    }
  },
  onLoad(option) {
    //option为object类型，会序列化上个页面传递的参数
    if (option?.id) {
      uni.setNavigationBarTitle({
        title: '编辑地址'
      })
      this.addressInfo.id = option.id
      this.recAddr(option.id)
    } else {
      uni.setNavigationBarTitle({
        title: '新增地址'
      })
    }
    this.getAllPcaData()
  },
  methods: {
    async getAllPcaData() {
      const res = await util.request(api.pcaAreaUrl, {}, 'POST')
      console.log(res)
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      } else {
        let arr = res.data || []
        arr.forEach((item) => {
          item.label = item.name
          item.value = item.code
          item.children = [...item.posCityList]
          delete item.posCityList
          item.children.forEach((item1) => {
            item1.label = item1.name
            item1.value = item1.code
            item1.children = [...item1.posCountryList]
            delete item1.posCountryList
            item1.children.forEach((item2) => {
              item2.label = item2.name
              item2.value = item2.code
            })
          })
        })
        this.arealist = arr
      }
    },
    async recAddr(id) {
      const res = await util.request(api.getAddressDetailUrl + '?addressId=' + id, {}, 'POST')
      console.log(res)
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      } else {
        this.addressInfo = res.data || {}
		this.addressInfo.pcaString = this.addressInfo.detailAddress.split(' ')[0]
		this.addressInfo.detailAddressTemp = this.addressInfo.detailAddress.split(' ')[1]
      }
    },
    // 是否默认地址
    defaultChange(e) {
      if (e.detail.value) {
        this.addressInfo.isDefault = '1'
      } else {
        this.addressInfo.isDefault = '0'
      }
    },
    showPicker() {
      // this.$refs.picker.show()
      this.pickerShow = true
    },
    confirmArea(area) {
      this.addressInfo.province = area[0].label
      this.addressInfo.city = area[1].label
      this.addressInfo.area = area[2].label
	  this.addressInfo.pcaString = area[0].label + area[1].label + area[2].label

      this.addressInfo.provinceCode = area[0].value
      this.addressInfo.cityCode = area[1].value
      this.addressInfo.areaCode = area[2].value
      this.pickerShow = false
    },
    async submitEvent() {
      if (!this.addressInfo.realName) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '收货人不可为空'
        })
        return
      }
      if (!this.addressInfo.contactPhone) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '手机号码不可为空'
        })
        return
      }
      if (!this.addressInfo.areaCode) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '请选择省市区'
        })
        return
      }
      if (!this.addressInfo.detailAddressTemp) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '详细地址不可为空'
        })
        return
      }
	  this.addressInfo.detailAddress = this.addressInfo.pcaString + ' ' + this.addressInfo.detailAddressTemp
      if (this.addressInfo.id) {
        const res = await util.request(api.updateAddressUrl, this.addressInfo, 'POST')
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '编辑地址成功'
          })
          setTimeout((res) => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        }
      } else {
        const res = await util.request(api.addAddressUrl, this.addressInfo, 'POST')
        console.log(res)
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '新增地址成功'
          })
          setTimeout((res) => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	
.add-address-page {
  // padding: 0 20rpx 20rpx;

  .each-line {
    display: flex;
    align-items: center;
    justify-content: normal;
    border-bottom: 1px solid #e5e5e5;
    padding: 20rpx 30rpx;

    .label {
      width: 160rpx;
    }

    .no-input {
      padding-left: 30rpx;
      flex-grow: 1;
      font-size: 28rpx;
    }

    .icon-carema {
      width: 24px;
      height: 24px;
    }
  }

  .left-default-btn {
    padding: 0 20rpx;
    margin-top: 30rpx;

    .default-box {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }

    .default-addr {
      font-size: 28rpx;
    }
  }

  .submit-btn {
    width: 90%;
    height: 90rpx;
    line-height: 90rpx;
    color: #fff;
    font-size: 32rpx;
    margin-top: 40rpx;
    border: 1px solid #007aff;
    background-color: #007aff;
    border-radius: 20rpx;
  }
}
</style>

<style lang="scss">
.add-address-page {
  .uni-file-picker {
    display: contents;
  }

  .pac-picker .input-value {
    display: none;
  }

  .pca-show {
	  flex: 1;
 //    width: 600rpx;
	height: 40rpx;
    text-align: right;
  }
}
.YG-adder-img { // 箭头容器
		width: 16rpx; // 调整大小
		height: 28rpx; // 调整大小
	    display: flex; // 确保图片垂直居中（如果需要）
	    align-items: center;
	
		image {
			height: 100%;
			width: 100%;
		}
	}
</style>